<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  ElButton,
  ElSelect,
  ElInput,
  ElOption,
  ElDatePicker,
  ElNotification,
} from "element-plus";
import { Plus, Delete } from "@element-plus/icons-vue";
import { withDefaults, defineProps } from "vue";
const filter2Ref = ref();
// 1I第一个item 属性名options
const attrNameOpts = ref();
interface Props {
  filter: Conditions;
}
interface Conditions {
  relation: string;
  conditions: ConditionItem[];
}
interface ConditionItem {
  attrName: string;
  // 1/属性名类型 Code 码值型
  attrNameType: "string" | "boolean" | "number" | "date" | "code" | null;

  operator1: string;

  operator1Opts: any[] | null;

  operator2: any;

  operator2Opts: any[] | null;

  field1: any;

  field2: any;
}
const props = withDefaults(defineProps<Props>(), {
  filter: () => {
    return {
      relation: "且",
      conditions: [],
    };
  },
});
const filter1 = ref(props.filter);
const cusGroupTypeOptsGet = async () => {
  attrNameOpts.value = [
    {
      label: "字符型标签1",
      value: "字符型标签1",
      valType: "string",
      children: [
        {
          label: "等于",
          value: "等于",
        },
        {
          label: "不等于",
          value: "不等于",
        },
        {
          label: "包含",
          value: "包含",
        },
      ],
    },
  ];
};

const onHandleAttrNameChange = (value: any, index: number) => {
  filter1.value.conditions[index].operator1 = "";
  filter1.value.conditions[index].attrNameType = attrNameOpts.value.find(
    (e: any) => value == e.value
  )?.valType;
  filter1.value.conditions[index].operator1Opts = value
    ? attrNameOpts.value.find((e: any) => value == e.value)?.children ?? []
    : [];
};

onMounted(() => {
  cusGroupTypeOptsGet();
});
</script>

<template>
  <div ref="filter2Ref">
    <div
      v-for="(item, index) in filter1.conditions"
      :key="`filter_${Math.random()}_${index}`"
    >
      <div>
        <el-select
          v-model="item.attrName"
          clearable
          filterable
          placeholder="请选择"
          @change="(value) => onHandleAttrNameChange(value, index)"
        >
          <el-option
            v-for="e in attrNameOpts"
            :key="e.label"
            :label="e.label"
            :value="e.value"
          />
        </el-select>

        <el-select
          v-model="item.operator1"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="f in item.operator1Opts"
            :key="f.label"
            :label="f.label"
            :value="f.value"
          />
        </el-select>

        <template
          v-if="
            item.attrNameType == 'string' &&
            ['等于', '不等于', '包含', '不包含'].includes(item.operator1)
          "
        >
          <el-input
            v-model="item.operator2"
            placeholder="请输入内容"
          />
        </template>
      </div>
    </div>
  </div>
</template>
